<template>
  <van-row class="home">
    <div class="swipe-content">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        lazy-render="true"
        initial-swipe="0"
      >
        <van-swipe-item v-for="item in state.swperList" :key="item.id">
          <img :src="item.imgUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-row class="health-counseling">
      <van-row
        style="width: 100%; padding: 10px 0; align-items: baseline"
        justify="space-between"
        align="center"
      >
        <van-col span="12" align="left">
          <span style="font-size: 18px; font-weight: bold">健康咨询</span>
        </van-col>
        <van-col span="12" align="right">
          <span style="color: #a4a6a5">更多</span>
          <van-icon name="arrow" style="color: #999" />
        </van-col>
      </van-row>
      <van-skeleton v-if="!state.educationList.length > 0" style="width: 100%">
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
      <van-skeleton v-if="!state.educationList.length > 0" style="width: 100%">
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
      <van-skeleton v-if="!state.educationList.length > 0" style="width: 100%">
        <template #template>
          <div :style="{ display: 'flex', width: '100%' }">
            <van-skeleton-image />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
              <van-skeleton-paragraph />
            </div>
          </div>
        </template>
      </van-skeleton>
      <div v-else>
        <div
          v-for="item in state.educationList"
          :key="item.id"
          style="width: 100%"
          @click="educationEvent(item)"
        >
          <van-card desc="" :title="item.title">
            <template #footer> </template>
            <template #thumb>
              <van-skeleton-image v-if="!item.images" />
              <img v-else :src="item.images" alt="" />
            </template>
            <template #desc>
              <p
                style="
                  color: #969799;
                  height: 38px;
                  overflow: hidden;
                  display: -webkit-box; /* 必须设置display属性为-webkit-box */
                  overflow: hidden; /* 超出部分隐藏 */
                  text-overflow: ellipsis; /* 显示省略号 */
                  -webkit-line-clamp: 2; /* 限制显示两行 */
                  -webkit-box-orient: vertical; /* 垂直方向上的换行 */
                "
              >
                {{ item.keywords }}
              </p>
              <van-button plain round type="primary" hairline size="mini">
                立即查看
              </van-button>
            </template>
          </van-card>
        </div>
      </div>
    </van-row>
    <van-row class="health-counseling publicize">
      <van-row
        style="width: 100%; padding: 10px 0; align-items: baseline"
        justify="space-between"
        align="center"
      >
        <van-col span="12" align="left">
          <span style="font-size: 18px; font-weight: bold">营养宣传</span>
        </van-col>
        <van-col span="12" align="right">
          <span style="color: #a4a6a5">更多</span>
          <van-icon name="arrow" style="color: #999" />
        </van-col>
      </van-row>
      <van-grid
        class="video-content"
        :gutter="12"
        style="width: 100%"
        :column-num="2"
      >
        <van-grid-item
          icon="photo-o"
          v-for="(video, index) in state.videoList"
          :key="index"
        >
          <div class="poster-content" @click="videoEvent(item, index)">
            <img class="play-icon" src="@/assets/img/playIcon.png" alt="" />
            <img
              :src="video.poster"
              style="width: 100%; object-fit: cover; height: 100px"
            />
          </div>
          <video :id="`video_${index}`" controls>
            <source :src="video.imgUrl" type="video/mp4" />
          </video>
        </van-grid-item>
      </van-grid>
    </van-row>
    <van-tabbar
      v-model="state.navActive"
      active-color="#08D781"
      @change="onChange"
    >
      <van-tabbar-item icon="wap-home-o"> 服务 </van-tabbar-item>
      <van-tabbar-item>
        <van-row>
          <SvgIcon
            width="30"
            height="30"
            name="educationRecords"
            color="rgb(8, 215, 129)"
          ></SvgIcon>
        </van-row>
        宣教
      </van-tabbar-item>
      <van-tabbar-item icon="notes-o"> 历史订单 </van-tabbar-item>
    </van-tabbar>
  </van-row>
</template>
<script setup>
import { nextTick, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { swperList, educationPage } from "@/api/home/home";
const router = useRouter();
const route = useRoute();
const state = reactive({
  navActive: 1,
  // 视频加载完成数量
  videoLoadNum: [],
  swperList: [],
  educationList: [],
  poster: "",
  videoList: [
    {
      poster: "",
      imgUrl: "https://xiangyamy.oss-cn-beijing.aliyuncs.com/mp4/yyx-05.mov",
    },
    {
      poster: "",
      imgUrl: "https://xiangyamy.oss-cn-beijing.aliyuncs.com/mp4/yyx-06.mov",
    },
    {
      poster: "",
      imgUrl: "https://xiangyamy.oss-cn-beijing.aliyuncs.com/mp4/yyx-07.mov",
    },
    {
      poster: "",
      imgUrl: "https://xiangyamy.oss-cn-beijing.aliyuncs.com/mp4/yyx-08.mp4",
    },
  ],
});
// 判断视频是否为全屏方法
function checkIsFullScreen() {
  var isFullScreen =
    document.fullscreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen;
  return isFullScreen == undefined ? false : isFullScreen;
}
// 监听事件
document.addEventListener("fullscreenchange", () => {
  if (checkIsFullScreen()) {
  } else {
    state.videoList.forEach((value, index) => {
      const video = document.getElementById(`video_${index}`);
      video.pause();
    });
    // alert("退出全屏");
  }
});
// 点击视频
const videoEvent = (item, index) => {
  const video = document.getElementById(`video_${index}`);
  if (video.requestFullscreen) {
    video.play();
    video.requestFullscreen();
  }
};
// 点击咨询列表
const educationEvent = (val) => {
  router.push({
    name: "educationDetails",
    query: {
      id: val.id,
      title: val.title,
      images: val.images,
    },
  });
};

// 获取轮播图列表
const querySwper = () => {
  swperList({}).then((v) => {
    const data = v.data;
    state.swperList = data;
  });
};
querySwper();
// 获取宣教列表
const queryEducationList = () => {
  const params = {
    type: 1,
    pageNum: 1,
    pageSize: 10,
  };
  educationPage(params).then((v) => {
    const data = v.data.records;
    state.educationList = data.slice(0, 3);
  });
};
queryEducationList();

// 设置封面帧数
const setVideo = () => {
  state.videoList.forEach((value, index) => {
    const video = document.createElement("video");
    video.src = value.imgUrl;
    console.log(value.imgUrl);
    video.setAttribute("crossOrigin", "Anonymous");
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    video.onloadedmetadata = () => {
      video.currentTime = 5; //指定视频的低3秒
    };

    video.oncanplay = () => {
      ctx.drawImage(video, 0, 0, 300, 150);
      canvas.toDataURL("image/png");
      value.poster = canvas.toDataURL("image/png");
      state.videoLoadNum.push(value);
    };
  });
};
nextTick(() => {
  setVideo();
});
const onChange = (val) => {
  if (val == 0) {
    router.push({ name: "home" });
  } else if (val == 2) {
    router.push({ name: "historicalOrders" });
  }
};
</script>
<style lang="scss" scoped>
.home {
  padding: 0 16px;
  padding-bottom: 70px;
  .publicize {
    ::v-deep .van-grid-item__content--center {
      padding: 0;
    }
    ::v-deep .van-grid-item__content:after {
      border: none;
    }
  }

  .swipe-content {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    color: #fff;
    margin-top: 16px;
    img {
      height: 160px;
      width: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
  // .my-swipe .van-swipe-item {
  //   color: #fff;
  //   font-size: 20px;
  //   line-height: 150px;
  //   text-align: center;
  //   background-color: #39a9ed;
  // }

  .nav {
    padding-top: 10px;
    width: 100%;
  }
  .health-counseling {
    background: #fff;
    border-radius: 10px;
    margin-top: 0;
    width: 100%;
    overflow: hidden;
    .van-card {
      width: 100%;
      background: #fff;
      padding-right: 5px;
      padding: 0;
      position: relative;
      margin-bottom: 10px;
      ::v-deep .van-card__thumb {
        width: 45% !important;
        height: 100px;
        border-radius: 10px;
        overflow: hidden;
        border: 0.5px solid #e7e7e7;
        img {
          width: 100%;
          object-fit: cover;
        }
        .van-skeleton-image {
          width: 100%;
        }
      }
      ::v-deep .van-card__content {
        text-align: left;
        min-height: inherit;
      }
      ::v-deep .van-card__title {
        font-size: 14px;
        margin-bottom: 10px;
        margin-top: 5px;
      }
      .van-button {
        padding: 14px 14px;
        float: right;
        color: #08d781;
      }
      .van-button::after {
        border: 1px solid #08d781;
      }
    }
  }
  .enteral-nutrition {
    background: url("@/assets/img/enteralNutrition.png");
    background-size: cover;
    border-radius: 10px;
    height: 190px;
    padding: 16px;
    position: relative;
    color: #fff;
    overflow: hidden;
    margin-bottom: 10px;
    .title {
      font-size: 20px;
      font-weight: bold;
    }
    .describe {
      margin-top: 10px;
      text-align: left;
    }
    img {
      width: 48px;
      height: 48px;
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }
  .therapeutic-diet {
    background: url("@/assets/img/therapeuticDiet.png");
    height: 58px;
    background-size: cover;
    border-radius: 10px;
    padding: 16px;
    position: relative;
    color: #fff;
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-top: -10px;
    }
    img {
      width: 48px;
      height: 48px;
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }
  .nutritional-meals {
    background: url("@/assets/img/nutritionalMeals.png");
    height: 58px;
    background-size: cover;
    border-radius: 10px;
    margin-top: 10px;
    padding: 16px;
    position: relative;
    color: #fff;
    .title {
      font-size: 20px;
      font-weight: bold;
      margin-top: -10px;
    }
    img {
      width: 48px;
      height: 48px;
      position: absolute;
      right: 5px;
      bottom: 5px;
    }
  }
  ::v-deep .video-content {
    padding: 0 !important;
    // padding-bottom: 60px !important;
    ::v-deep .van-grid-item {
      overflow: hidden;
    }
    .poster-content {
      width: 100%;
      height: 100px;
      position: absolute;
      z-index: 1;
      border-radius: 10px;
      overflow: hidden;
      border: 0.5px solid #e7e7e7;
    }
    .play-icon {
      width: 36px;
      height: 36px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    video {
      width: 100%;
      height: 100px;
      border-radius: 10px;
      object-fit: cover;
    }
  }
  .van-tabbar {
    padding: 10px 0;
    ::v-deep .van-icon {
      font-size: 28px;
    }
  }
}
</style>
